<template>
<el-container  class="body">
        <el-header>
          <i class="el-icon-arrow-left"></i>
            <h3>创建圈子</h3>
             <el-button icon="el-icon-search" class="el-circle-search" round></el-button>
        </el-header>
        <el-main>
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="圈子名称">
                <el-input v-model="ruleForm2.name"></el-input>
              </el-form-item>
              <el-form-item label="真实姓名">
                <el-input v-model="ruleForm2.name"></el-input>
              </el-form-item>
              <el-form-item label="圈子主体">
                <el-input v-model="ruleForm2.name"></el-input>
              </el-form-item>
               <el-form-item label="圈子主体">
              </el-form-item>
              <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-circle-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-button type="success">成功按钮</el-button>
            </el-form>
        </el-main>
</el-container>
  
</template>

<script>

  export default {
    data() {
      return {
        logining: false,
        ruleForm2: {
          name: '请输入圈子名称',
          checkPass: ''
        },
        rules2: {
          account: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          validata: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            //{ validator: validaePass }
          ],
          checkPass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    methods: {
      handleReset2() {
        this.$refs.ruleForm2.resetFields();


      },
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
            if(valid){ 
              this.$fetch('/api/v2/movie/top250').then((response) => {
                // console.log(response)
              })
            } 
        });
      },
    }
  }

</script>
<style >
@import '../common/css/circle.css'

</style>
